<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	
	<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="js/ext/ext-all.js"></script>
 	<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
	 	
	<script type="text/javascript">
 		 
		Ext.require(['*']);
		 
		Ext.onReady(function() {	  		 
			var table = Ext.create('Ext.grid.Panel', {
			   		store:  Ext.create('Ext.data.Store', {
				    storeId:'simpsonsStore',
				    fields:['name', 'email', 'phone'],
				    data:{'items':[
				        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
				        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
				        { 'name': 'Homer', "email":"homer@simpsons.com",  "phone":"555-222-1244"  },
				        { 'name': 'Marge', "email":"marge@simpsons.com",  "phone":"555-222-1254"  }
				    ]},
				    proxy: {
				        type: 'memory',
				        reader: {
				            type: 'json',
				            root: 'items'
				        }
				    }
				}),
			    columns: [
			        { text: 'Name',  dataIndex: 'name' },
			        { text: 'Email', dataIndex: 'email', flex: 1 },
			        { text: 'Phone', dataIndex: 'phone' }
			    ] 
			});
			
			 var form = Ext.create('Ext.form.Panel', {
				    renderTo: Ext.getBody(),
				    layout: {
			            type: 'vbox',
        				align: 'stretch',
        				 frame: false,
			        },
				   
				     
				    bodyPadding: 5,
				    defaultType: 'textfield',
				    buttonAlign : "center",
				    
				    items: [
				        {
				            fieldLabel: '個股代號',
				            width : 200,
				            name: 'symbol'
				        } , 
				        table
				    ],
				    buttons: [
				       {
					       text: '新增',
					       handler: function() {
					           
					       }
					   },
					   {
					   
					       text: '查詢',
					       handler: function() {
					            
					       }
				       }
    				]
			  });
	  	});
	</script>
</head>
<body>
  
</body>
</html>